<h1>Save</h1>
<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="serv.save()">
    <clr-icon shape="floppy"></clr-icon>
    Save
  </button>
  <button class="btn" (click)="serv.load()">
    <clr-icon shape="install"></clr-icon>
    Load
  </button>
  <button class="btn btn-danger" (click)="clearModal = true">
    <clr-icon shape="uninstall"></clr-icon>
    Clear
  </button>
</div>
<h2>Export / Import Save</h2>
<textarea name="raw" [(ngModel)]="exp" rows="3"></textarea>
<div class="btn-group btn-primary">
  <button class="btn btn-success" (click)="export()">
    Export
  </button>
  <button class="btn" (click)="import()">
    Import
  </button>
</div>
<h2>Autosave Options</h2>
<div class="toggle-switch">
  <input type="checkbox" id="t1" [(ngModel)]="serv.options.autosaveNotification">
  <label for="t1">Autosave Notification</label>
</div>

<clr-modal [(clrModalOpen)]="clearModal">
  <h3 class="modal-title">Clear</h3>
  <div class="modal-body">
    <p>Are you sure you want to delete everything ?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="clearModal = false">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="this.serv.clear(); clearModal = false">Clear</button>
  </div>
</clr-modal>
